<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生信息管理</title>
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <h1>新增学员</h1>
  <form action='http://www.baidu.com/s?' class="info" autocomplete="off">
    姓名：<input type="text" class="uname" name="uname" />
    年龄：<input type="text" class="age" name="age" />
    性别:
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" name="salary" />
    就业城市：<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>

  </form>


  <h1>就业榜<span style="float: right; font-size: 18px;  padding-right: 30px";  >条数据</span></h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <script>

    const all = document.querySelectorAll("body [name]")
    const add = document.querySelector(".add")
    const form = document.querySelector(".info")

    const name = document.querySelector(".uname")
    const age = document.querySelector(".age")
    const gender = document.querySelector(".gender")
    const salary = document.querySelector(".salary")
    const city = document.querySelector(".city")
    const tbody = document.querySelector("tbody")


    const span = document.querySelector("h1 span")
    const data = JSON.parse(localStorage.getItem('data')) || []

  

    function xuanran() {
     
      console.log(data)
      const newdata =  data.map((e,i)=>
      `
        <tr>
        <td>${e.id}</td>
        <td>${e.name}</td>
        <td>${e.age}</td>
        <td>${e.sex}</td>
        <td>${e.sal}</td>
        <td>${e.city}</td>
        <td>
          <a href="javascript:" data-id=${i}>删除</a>
        </td>
        </tr>
      `
      )
      tbody.innerHTML = newdata.join("")
      span.innerHTML = newdata.length+"条数据"
    }

    xuanran()


    form.addEventListener("click", function (e) {
      e.preventDefault()
      if (e.target.className == "add") {
        for (i = 0; i < all.length; i++) {
          if (all[i].value.trim() == "") {
            alert("有空 ")
            return
          }
        }
        data.push(
          {
            id:data.length === 0 ? 1 : data[data.length - 1].id + 1,
            name: name.value,
            age: age.value,
            sex: gender.value,
            sal: salary.value,
            city: city.value
          }
        )
        localStorage.setItem('data', JSON.stringify(data))

        this.reset()
        xuanran()

      }

    })

    tbody.addEventListener("click", function (e) {
      if (e.target.tagName === 'A') {
        data.splice(e.target.dataset.id, 1)
        localStorage.setItem('data', JSON.stringify(data))
      }
      xuanran()
    })






















  </script>

</body>

</html>